<template>
	<u-index-list :index-list="indexList">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, index) in item" 
					@click="storageCity(cell)">
						{{cell}}
					</view>
				</u-index-item>
			</template>
		</u-index-list>
</template>

<script>
	export default {
		data() {
			return {
				citylist: [],
				hotcity: [],
				indexList: [],
				itemArr: [
					
				]
			};
		},
		methods: {
			ishot(list) {
				var hotcity = []
				list.forEach(item => {
					if (item.isHot == 1) {
						hotcity.push({
							cityname: item.name,
							cityId: item.cityId
						})
					}
				})
				return hotcity
			},
			renderCity(list) {
				// console.log(list)
				var letterList = []
				var cityList = []
				for (var i = 65; i < 91; i++) {
					var b = String.fromCharCode(i)
					letterList.push(b)

					var newlist = list.filter(function(item) {
						// console.log(item.pinyin.substring(0, 1).toUpperCase() === 'A')
						return item.pinyin.substring(0, 1).toUpperCase() === b
					})
					// console.log(newlist)
					if (newlist.length > 0) {
						cityList.push({
							type: b,
							list: newlist
						})
					}
				}
				console.log(cityList)

				return cityList
			},
			storageCity(cell){
				console.log(cell);
				this.$store.commit('address/AddCity',cell)
				uni.navigateBack({
					
				})
			}
		},
		onLoad() {
			uni.request({
				url: 'https://m.maizuo.com/gateway?k=4814326',


				header: {
					'X-Host': 'mall.film-ticket.city.list'
				},
				success: (res) => {
					console.log(res.data.data.cities);
					this.citylist = this.renderCity(res.data.data.cities)
					this.hotcity = this.ishot(res.data.data.cities)
					// console.log(this.hotcity);
					console.log(this.citylist);
					var list = []
					
						
					this.citylist.forEach((item,index)=>{
						this.indexList.push(item.type)
						list.push(item.list)
					})
					
					list.forEach((item)=>{
						// console.log(item);
						var arr = []
						item.forEach(itm=>{
							arr.push(itm.name)
							// console.log(itm.name)
						})
						this.itemArr.push(arr)
						arr = []
						
					})
					console.log(this.itemArr);
				
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
